<template>
  <div class="favorite-container">
    <div class="favorite-header sticky">
      <div class="header-content">
        <h2 class="title">我的收藏</h2>
        <div class="filter-section">
          <div class="filter-tabs">
            <div 
              v-for="tab in tabs" 
              :key="tab.value"
              :class="['tab-item', { active: currentTab === tab.value }]"
              @click="currentTab = tab.value"
            >
              <span class="label">{{ tab.label }}</span>
              <span class="count">({{ tab.count }})</span>
            </div>
          </div>
          <div class="sort-dropdown">
            <select v-model="sortType" class="sort-select">
              <option value="time">按收藏时间</option>
              <option value="price-asc">价格从低到高</option>
              <option value="price-desc">价格从高到低</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="favorite-grid">
      <div 
        v-for="item in filteredFavorites" 
        :key="item.id" 
        class="favorite-card"
      >
        <div class="card-image">
          <img :src="item.image" :alt="item.name" class="card-img" />
          <div 
            :class="['status-badge', item.status]" 
            v-if="item.status"
          >
            {{ item.statusText }}
          </div>
        </div>
        <div class="card-content">
          <div class="header-row">
            <h3 class="item-name">{{ item.name }}</h3>
            <button 
              class="unfavorite-btn"
              @click="toggleFavorite(item)"
            >
              <i class="iconfont icon-heart-filled"></i>
            </button>
          </div>
          <p class="item-desc">{{ item.description }}</p>
          <div class="seller-info">
            <img 
              :src="item.seller.avatar" 
              :alt="item.seller.name" 
              class="seller-avatar"
            />
            <div class="seller-meta">
              <span class="seller-name">{{ item.seller.name }}</span>
              <span class="seller-school">{{ item.seller.school }}</span>
            </div>
          </div>
          <div class="footer-row">
            <div class="price-info">
              <span class="price">¥{{ item.price }}</span>
              <span class="unit">元</span>
            </div>
            <button 
              v-if="item.status === 'on-sale'" 
              class="action-btn contact"
            >
              <i class="iconfont icon-message"></i>
              联系卖家
            </button>
            <span 
              v-else 
              class="status-text"
            >{{ item.statusText }}</span>
          </div>
        </div>
      </div>

      <div class="empty-state" v-if="filteredFavorites.length === 0">
        <i class="iconfont icon-empty"></i>
        <div class="empty-content">
          <h3>还没有收藏商品</h3>
          <p>去发现更多好物吧</p>
          <button class="browse-btn" @click="goBrowse">去逛逛</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const currentTab = ref('all');
const sortType = ref('time');

const tabs = [
  { label: '全部', value: 'all', count: 12 },
  { label: '在售', value: 'on-sale', count: 8 },
  { label: '已售', value: 'sold', count: 4 }
];

const favorites = ref([
  {
    id: 1,
    name: '2023款MacBook Pro 16寸',
    description: 'M3芯片 512GB 深空灰 99新',
    price: 12999,
    image: '/assets/macbook.jpg',
    status: 'on-sale',
    statusText: '在售',
    seller: {
      name: 'Alice',
      school: '清华大学',
      avatar: '/assets/avatar1.png'
    }
  },
  {
    id: 2,
    name: '佳能EOS R5相机',
    description: '全画幅微单 仅快门500次',
    price: 18999,
    image: '/assets/camera.jpg',
    status: 'sold',
    statusText: '已售',
    seller: {
      name: 'Bob',
      school: '北京大学',
      avatar: '/assets/avatar2.png'
    }
  }
]);

// 筛选和排序
const filteredFavorites = computed(() => {
  let filtered = [...favorites.value];
  
  // 标签筛选
  if (currentTab.value !== 'all') {
    filtered = filtered.filter(item => item.status === currentTab.value);
  }
  
  // 排序
  switch (sortType.value) {
    case 'price-asc':
      filtered.sort((a, b) => a.price - b.price);
      break;
    case 'price-desc':
      filtered.sort((a, b) => b.price - a.price);
      break;
    default:
      filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
  }
  
  return filtered;
});

const toggleFavorite = (item) => {
  // 收藏逻辑
  console.log('取消收藏', item.id);
};

const goBrowse = () => {
  // 跳转逻辑
  console.log('前往浏览');
};
</script>

<style scoped>
.favorite-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 48px;
  background: #f8f9fa;
}

.favorite-header {
  position: sticky;
  top: 24px;
  z-index: 10;
  margin-bottom: 32px;
}

.header-content {
  background: white;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.title {
  font-size: 32px;
  color: #1a73e8;
  margin-bottom: 24px;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-tabs {
  display: flex;
  gap: 32px;
}

.tab-item {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-item.active {
  background: #1a73e8;
  color: white;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.2);
}

.tab-item .label {
  font-weight: 500;
}

.tab-item .count {
  font-size: 14px;
  color: #666;
}

.sort-select {
  padding: 12px 24px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  background: white;
  outline: none;
  transition: border-color 0.3s;
}

.sort-select:focus {
  border-color: #1a73e8;
}

.favorite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 32px;
}

.favorite-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}

.favorite-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.card-image {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.card-img:hover {
  transform: scale(1.05);
}

.status-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 16px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
}

.status-badge.on-sale {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.sold {
  background: #ffebee;
  color: #b71c1c;
}

.card-content {
  padding: 24px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.item-name {
  font-size: 20px;
  color: #1a73e8;
  line-height: 1.3;
}

.unfavorite-btn {
  background: none;
  border: none;
  color: #ff4444;
  font-size: 20px;
  cursor: pointer;
}

.item-desc {
  color: #424242;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.seller-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.seller-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.seller-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seller-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.seller-school {
  font-size: 14px;
  color: #666;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  font-size: 24px;
  color: #ff6b00;
  font-weight: 700;
}

.unit {
  font-size: 14px;
  color: #9e9e9e;
  margin-left: 4px;
}

.action-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact {
  background: #1a73e8;
  color: white;
  transition: background 0.3s;
}

.contact:hover {
  background: #1557b0;
}

.empty-state {
  text-align: center;
  padding: 96px 0;
}

.empty-state i {
  font-size: 96px;
  color: #e0e0e0;
  margin-bottom: 32px;
}

.empty-content h3 {
  font-size: 24px;
  color: #424242;
  margin-bottom: 16px;
}

.empty-content p {
  color: #666;
  font-size: 16px;
  margin-bottom: 24px;
}

.browse-btn {
  padding: 14px 48px;
  font-size: 18px;
  background: #1a73e8;
  color: white;
  border: none;
  border-radius: 28px;
  transition: transform 0.3s;
}

.browse-btn:hover {
  transform: translateY(-2px);
}
</style>